<template>
  <div class="user-sidebar">
    <el-card class="user-info-card">
      <div class="user-info">
        <el-avatar :size="80" :src="userInfo?.avatar || defaultAvatar"></el-avatar>
        <h3 class="username">{{ userInfo?.nickname || userInfo?.username || '用户' }}</h3>
        <p class="user-id">账号ID: {{ userInfo?.id || '-' }}</p>
      </div>
    </el-card>
    
    <el-card class="menu-card">
      <el-menu
        :default-active="activeMenu"
        class="user-menu"
        router
      >
        <el-menu-item index="/user/profile">
          <el-icon><User /></el-icon>
          <span>个人中心</span>
        </el-menu-item>
        
        <el-menu-item index="/user/orders">
          <el-icon><Tickets /></el-icon>
          <span>我的订单</span>
        </el-menu-item>
        
        <el-menu-item index="/user/favorites">
          <el-icon><Star /></el-icon>
          <span>我的收藏</span>
        </el-menu-item>
        
        <el-menu-item index="/my-transactions">
          <el-icon><Money /></el-icon>
          <span>交易记录</span>
        </el-menu-item>
      </el-menu>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getUserInfo } from '@/utils/auth'
import { User, Tickets, Star, Money } from '@element-plus/icons-vue'

const route = useRoute()
const defaultAvatar = '/default-avatar.png'

// 用户信息
const userInfo = ref(null)

// 获取活跃菜单
const activeMenu = computed(() => {
  return route.path
})

// 初始化用户信息
const initUserInfo = () => {
  userInfo.value = getUserInfo()
}

// 初始化
onMounted(() => {
  initUserInfo()
})
</script>

<style lang="scss" scoped>
.user-sidebar {
  width: 100%;
  
  .user-info-card {
    margin-bottom: 20px;
    
    .user-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
      
      .el-avatar {
        margin-bottom: 15px;
      }
      
      .username {
        margin: 10px 0 5px;
        font-size: 18px;
        color: #333;
      }
      
      .user-id {
        margin: 0;
        font-size: 14px;
        color: #999;
      }
    }
  }
  
  .menu-card {
    .user-menu {
      border-right: none;
    }
  }
}

@media (max-width: 768px) {
  .user-sidebar {
    margin-bottom: 20px;
  }
}
</style> 